Web Development

Validating Your Online Form When User Clicks Submit with ZK Framework

Posted by admin on August 19, 2014  /   Posted in Business, Online Platform, Web Development, ZK

So you’re using ZK Framework to build your online forms, and your forms have fields which needs validations. You have a “Submit” button which your user will click when they’re done filling out the form. You’re using the MVVM paradigm with the data binding. You tried adding constraints to the fields, but you want the validations to happen only when your users click the “Submit” button. We have discovered this little trick that might help you.

Most likely, you are using the @bind(…) method to bind your form fields to the View Model attribute, e.g:

<textbox value="@bind(vm.someAttribute)" constraint="no empty" .../>

We noticed that when we used @bind() in conjunction with a constraint on the field, the validation was triggered immediately, for example, when the cursor left the corresponding input field. Depending on your requirement, this might be acceptable, but in one of the project that we have with our client, we went the extra mile for our client and opted for a cleaner solution, which is to trigger the validation only when the user clicks the “Submit” button.

The answer is to break the @bind() into @load() and @save(), and make sure the @save() is called before the command which handles the “Submit” button, i.e:

<textbox 
     value="@load(vm.someAttribute) @save(vm.someAttribute, before='save')" 
     constraint="no empty" .../>

<button label="Submit" onClick="@command('save')"/>

Note that the @save() expression has before=’save’, which matches the name of the ‘save’ @command() handler. This way, the validation is invoked just before the ‘save’ command, and the invalid input pop message is only shown at that time.

That’s it for now. We hope this tip helps someone out there with the same situation.

A little bit about us, NextCoder is a team of data analysts, software architects, and developers.  Using our up-to-date skills and experience, we help businesses make profitable decisions while increasing their capacity to grow. We combine Business Intelligence methodology with our vast software development experience to provide effective and unique solutions for our clients. Some of our products includes:

Tutoring Metrics

Team Tag 24

Hands-on Review of Bands in iReport

Posted by Esteban Martinez on August 19, 2014  /   Posted in Online Platform, Web Development

Here at nextCoder, we regularly use the JasperReports reporting engine and the iReport report designer tool in the systems we build for our clients. One of the issues I’ve noticed is that the iReport Ultimate Guide has lots of great technical info but doesn’t address most of the issues that come up in my real-world usage of the tool.

So I’ll be writing about some of tips and tricks that we here at nextCoder use with iReport. There’s a bunch of stuff to cover so I’ll deliver the goods in 3 separate articles. So lets get part 1 started with understanding the basics of all those report bands within the template, which will help with some creative reporting!

General Assumption
I assume that you are somewhat familiar with how iReports work, I will be glazing over some terminologies and concepts that I consider basic.  If you would like for me to go deeper on some of these, that’s what the comments box is for down there.

Title Band:
Meant for the title of the report. Intended to only print once and lacks any iteration properties.

Page Header:
Meant for printing on every page. Designed for keeping track of where you are in a multi-page report or to appear on a page when particular trigger has been fired. For example, if you have an accounting report for business expenses, there will be a section that will have employee costs. So in the header, you would show that this page is reporting employee costs. Then when
the report changes to reporting the utility expenses, the header would change to reflect this.

I usually have Static Textboxes for keeping track of the Page Header. A variable from a parameter could be used, however, if your information changes mid-page the Page Header will not show this. It’s often simpler to make a new sub-report if you have new Page Header information.

So in our example, the report would finish somewhere on the page reporting the cost of employees and leave the rest of the page blank. Then the new page would start with the new Page Header and start showing the costs of utilities. An easy way to ensure that a sub-report will start on it’s own page is make sure that the actual sub report (NOT the sub-report element ‘graybox’) has a page height of a full page. For 8.5 x 11″ this is 792. You can see this information by selecting the name of the report at the top of the list on the left hand side.ReportName

A secondary use of the Page Header is as a notification or alert. An example would be of a project exceeding a budget. In this case you would not always want the band to print. We can control this with the PrintWhen property of the band.

PrintWhen So the expression would look similar to:

$F{current_expense} > $P{project_budget}

Put in your notification text in the textfield and now this message will only print when the project has exceeded costs. Also great use for inventory too high or low.

We here at nextCoder we love the PrintWhen control!

TIP: There is a PrintWhen control for individual textboxes, a frame, or the entire band. This can be a real life-saver if your report has to dynamically change in accordance to user choices/selections.

Column Header:
Simple Static Text boxes that will print at the top of a column and will reprint again on the next page.

TIP: If you drag a field from the list on the left hand side of iReport into the detail band, a corresponding column header will be generated automatically in this band.

ColumnHeader

Detail Band:
This is where the majority of your report will take place. The most important aspect of the Detail Band is it will iterate through data automatically. So if you have a field called $F{employee}.getSalary(), then it will access that list of employee salaries and start listing them until it reaches the end.

NOTE: If you are using a sub-report, then it will be the band in which the actual sub-report is being processed that will determine iterating behavior. So if the parent report wants a complete list of a set in the title band (or any non-iterating band), then place the sub-report element in the title band. But make sure that the child(sub-report itself) is using the detail band to
iterate through the data.

Column Footer:
This band is meant mainly for keeping track of a total for a column of a page. It can also be used for keeping a running total if the report is spanning several pages for that column.

Here at nextCoder, we typically create a variable for this and give it a Calculation of Sum and Reset Type of Report. This will give me a running total for the report on each page. Use the Increment Type to update the variable when you like. So if I want the new total at the bottom of every page, I would select Page for the Increment Type.

Page Footer:
This band is used to repeat values at the bottom of every page. Typically used for Page X of Y information and a good place for the date. Both of which you can simply insert from the Palette Tools section in iReport and drag a box into the band.

NOTE: To open Palette, select ‘Window’ from menu and then ‘Palette’ or Ctrl + Shift + 8 Paging and Date utilities will be in the ‘Tools’ section.

Last Page Footer:
This band will print only on the last page of a report. Typically used for signaling the end of the report with a Static Text box.

Summary Band:
The main purpose for this band is to report out totals for the entire report. Will only print out on last page of report. If you have been keeping track of running totals with variables, or simply want to print a final total for the report, this is where they should go.

NOTE:  Variables should have their Reset Type set at Report. Otherwise you may not have all the data in the variable.

No Data:
This band will only print when enabled and if the report does not recieve data to process. To enable the band, Go to the properties of the report(Usually I just click on the report name at the top of the list on the left hand side), and find the section “When No Data”. Then select “No Data Section” from the drop-down list.

NoData

Put in whatever Static Text you want into this band to signal that no data was sent to it. Good for debugging reports and sub-reports.

I hope this has given you a good overall feel of the different bands in Jasper Report and their practical, real-world uses.

See you next time when I’ll be covering the most powerful, yet most misused and misunderstood feature of the engine: Sub-reporting. We are going several levels deep!

-Esteban Martinez

Senior Programmer at nextCoder

Online Platforms: Building Shoulders To Stand On

Posted by admin on April 02, 2014  /   Posted in Business, Web Development

Background

I often heard that today, we are living in the “golden hours” of the Information Era where the advances is nothing short of incredible.  Example? For the first time in the known history, we became one global society.

The question now is — as those who surf would often ask — where is the next big wave?

We at nextCoder believe that the Online Platform (Software as a Service or SaaS is another name for it) sector has reached the condition where one of those big waves might happen.  And a lot of software development companies (including us) are gearing up and getting ready to ride this wave. And a lot of Business Intelligence and Data Analysis companies (including us) are getting ready for this also.

What Qualifies As An Online Platform?

The first thing to be clear about is that an Online Platform is not simply a website or a web application.  There are millions of websites out there going up and down, and there are millions of web applications developed either for private usage or public.  Obviously not all of these can be regarded as platforms.  So let’s take a look at what is it exactly that separates a website or a web application from a real Online Platform:

  • Free or available at a lower cost for the users
  • Non-exclusive systems, the more users, the better it is
  • It is continually being developed and improved
  • Users produce content or other platforms within the platform

Who are these Online Platforms Users?

The users are the bread and butter for an Online Platform. Without its users the platform is … well, useless.  And just like how it is for businesses, the type of the users or customers can be divided into two broad categories: B2B and B2C.

Each of these categories have its own characteristics and determines how the Online Platform would have to be designed, constructed, and maintained.

B2B Online Platform users are using the system within the context of their respective companies.  Therefore such platforms are usually full of complex features, heavy on customizations, more robust and secure, and zero or limited interactions between users from other companies. Attlasian JIRA would be a good example for this.

B2C Online Platforms like Twitter on the other hand puts a lot of demands in terms of capacity (thousands to millions of users using the system), but not so much on complex transactions, workflow, and security.  At least not in the beginning, but since one of the characteristics of a platform is that it grows continually, eventually, even a B2C platform can have complex workflow. Also, this does not mean that B2C platforms are insecure or not robust.

And then there are Online Platforms that deals with both Businesses and Customers at the same time. eBay would be a prime example of this kind of platform.

Online Platform Categories

Educational / Entertainment – These platforms collects, share, and serve content that is educational or entertaining (or both) in nature. These are typically B2C.

Social / Networking - I think everyone know what these looks like.

Transactional / Operational – What used to be the domain of custom and exclusively built applications now has started to be available as an Online Platform. This is possible thanks to the Internet which drives the acceptance of connectivity even among businesses, which are far more conservative than individuals in this regard. These are mainly B2B.

Why Does This Matter To Everyone?

Eventually, almost all of us will become a user of one or more Online Platforms. Why? Because the next generation of Online Platforms will be even more useful, connected, and convenient than what is available today. This should be regarded as an excellent opportunity especially for Business Owners, company Executives and Entrepreneurs.

For individual customers, the sheer convenience and quality of services will continue to climb up. The amount of information that we would know about each other will also increase. That can be either scary or good, depending on your perspective.

For Business Owners and company Executives, what does this mean? Online Platforms can be used to operate existing businesses at a much lower cost.  How so? Because the Online Platform builder can spread the cost among platform users.

What about competitions? Why would a company use an Online Platform along with its competitors? It depends on the nature of the business. A good Online Platform has to be built independent of the factors in which the users compete on.

For example, a platform that automate operations, collect metrics, and perform data analysis, would boost the service quality of its users while keeping the playing field level.  On the other hand, platforms that share users’ data without their consent, or provide unfair advantages to some of the users, is a big no-no and should be avoided at all cost.

For Entrepreneurs, Online Platforms can be used to generate new streams of revenue. Build platforms for existing businesses to use.  There are so many niche opportunities that depends more on who do we know more than what we know.

What’s The Stats?

Those of us who loves statistics, here is an interesting Google trends plot on the level of interest of the term Online Platform over the years:

It should be noted that the trend is slightly increasing. That means the awareness of the Online Platform concept (represented by the term) is rising among us.

So the next time I hear someone says “golden hours” of the Information Era, I now have an idea what some of it may look like.  Let’s ride the wave together.

– Will Gunadi

How to Build an Executable War or Jar Files

Posted by admin on March 26, 2014  /   Posted in J2EE, Web Development

Background

In the effort to bend-over-backwards for our clients, we sometimes have to take a step back and think outside of the box.

99% of our Custom System are deployed as a web applications whether it is hosted on our server or the client’s. But for this particular client, they require a way to deploy the application on an isolated machine.  So we had to improvise a way to package a webserver *and* the application into something that can be donwloaded, and run without any complicated setup.

Sharing our Findings

So here is a simple way I found to make my maven webapp project into a self-executing jar file. Glad to share it for all to take advantage of. This has the obvious advantage of not having to setup a Tomcat server on each client that will use the application. And since an executable .jar files are OS independent, you can use this whether you are a Windows or UNIX shop.

Requirements:
1) Client needs to have Java installed
2) Your project must have a packaging pom or war.
3) Your web app should already be working and can compile without error.
4) This is only supported with the Tomcat7 plug-in

Now go into your pom.xml file and add the plug-in with your other plug-ins.

Here’s the code for the Maven plug-in:

<project>
 ...
 <packaging>war or pom</packaging>
 ...
 <build>
 ...
 <plugins>
 ...
 <plugin>
 <groupId>org.apache.tomcat.maven</groupId>
 <artifactId>tomcat7-maven-plugin</artifactId>
 <version>2.1</version>
 <executions>
 <execution>
 <id>tomcat-run</id>
 <goals>
 <goal>exec-war-only</goal>
 </goals>
 <phase>package</phase>
 <configuration>
 <path>/</path>
 <!-- optional only if you want to use a preconfigured server.xml file -->
 <serverXml>src/main/tomcatconf/server.xml</serverXml>
 <!-- optional values which can be configurable -->
 <attachArtifactClassifier>default value is exec-war but you can customize</attachArtifactClassifier>
 <attachArtifactClassifierType>default value is jar</attachArtifactClassifierType>
 </configuration>
 </execution>
 </executions>
 </plugin>
 ...
 </plugins>
 ...
 </build>
 ...
 </project>

This plug-in code is from the Apache site. I usually remove the server.xml option and I will set the ArtifactClassifier and ArtifactClassifierType to ‘exec-war’ and ‘jar’ respectively. But it should work will all the optional tags removed.

After you have your pom.xml file saved, drill your command line to folder that has the pom.xml file and run the following command:

mvn clean package -Prunnable-war

Things to note with this command.

  1. There is no space between the ‘-P’ argument and the name of the profile
  2. The ‘runnable-war’ is just a generic profile name. You will use the name of your profile that is in the pom.xml file. If you have more than one build then select the most appropriate. I usually have a ‘dev’, ‘test’ and ‘prod’ profiles. I typically use the ‘dev’

Once the command has been completed 3 new files will be created.

  • ${yourapp-version-war-exec}.jar: A runnable JAR that contains the tomcat embedded runtime
  • war.exec.manifest: a manifest file containing the main class to run
  • war-exec.preperties: a properties file containing some Tomcat config options and info.

NOTE: If your project has multiple modules then these 3 new files will be created in each folder.
For example, I typically have 5 folders for my web apps.

my-project
 |
 ---- my-project-common
 |
 ---- my-project-engine
 |
 ---- my-project-test
 |
 ---- my-project-web

I create the jar with the parent pom.xml, but the 3 new files that I will use are going where my web app is. (‘my-project-web’)

So for the final step, go into the target folder of your web app (‘my-project-web’ in my case) and run the following command to start the Tomcat server:

java -jar ${yourapp-version-war-exec}.jar

Open up a browser and go to http://localhost:8080 and your app should be there.
First run is usually slow to start because of all the extraction that happens.

Now you can simply copy these three files to another computer that has Java and start you web app with the same command.

Esteban Martinez
Senior Developer

ZK + TimelineJS + JQuery = Visualizing Business Data Along The Time Dimension : Part Two

Posted by admin on August 13, 2013  /   Posted in BI and Custom Development, Business, Web Development, ZK

by Cancan Gunadi

In our previous blog, Visualizing Business Data Along The Time Dimension, we have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way.

In this blog, we’ll show you the technical detail behind the implementation. We used TimelineJS, an interactive web-based timeline tool, and integrated it into the system that we’re building for our client. The system itself is built using ZK Framework.

First, in case you haven’t already, you can visit the actual Live Demo of this timeline on our server here (log on using the provided credential).

We assume some familiarities with the ZK Framework and TimelineJS libraries. We recommend you to visit their respective documentations.

Detail

The timeline area is contained inside a ZK iframe tag inside one of the ZK .zul file as such:

<window id="mainWin" apply="${mainCtrl}">
    ...
    <iframe id="iframe" src="jsp/timeline.jsp>
    

The iframe loads a JSP file which contains the TimelineJS script which is shown below. Some of the details of the JSP and zul file have been removed for the sake of simplicity.

// normal JSP import stuffs... here...

<head>
   <!-- jQuery -->
   <script type="text/javascript" src="../timelinelib/jquery-min.js"></script>
   <!-- BEGIN TimelineJS -->
   <script type="text/javascript" src="../timelinejs/storyjs-embed.js"></script>

   <script type="text/javascript">
       $(document).ready(function() {
       <% if (docs != null && docs.size() > 0) { %>
           var dataObject = 
                
           {
               "timeline":
               {
                   "headline":"Progress Info",
                   "type":"default",
                   "text":"<%= user.getFullName() %>",
                   <% if (startDate != null) { %>
                   "startDate":"<%=Util.formatDateTimeline(startDate)%>",
                   <% } %>
                   "date": [  
                   <%for (Document doc : docs) {%>
            
                       {
                           "startDate":"<%= doc.getDate() %>",
                           "headline":
                              "<a class='timeline-doc-link' 
                                  doc_id='<%= doc.getId() %>' 
                                  href='#'><%= doc.getTitle() %></a>",
                           "text":"<%= doc.getText() %>",
                           "asset":
                           {
                               "media":"",
                               "credit":"",
                               "caption":""
                           }
                       },
                   <% } %>            

        
                   ]
               }
           };

           createStoryJS({
               type:       'timeline',       
               source:     dataObject,
               embed_id:   'timelineContainer',
               font:       'Arvo-PTSans',
               start_at_end: true,
           });
           
           // div with id "timelineContainer" is the div that wraps 
           // around the entire timeline area, defined in the <body>
           // section.
           $('div#timelineContainer').click(function(event) {
               var clickedElem = 
                   document.elementFromPoint(event.pageX, event.pageY);
               if (clickedElem.nodeName == 'A' 
                       && clickedElem.className == 'timeline-doc-link') {
                   
                   // parent is [object Window] according to firebug
                   parent.zAu.send(
                      new parent.zk.Event(
                         parent.zk.Widget.$('$mainWin'), 
                         "onDocRequestedFromIframe", 
                         clickedElem.getAttribute('doc_id')));
               }
               
               return event;
           });
    
       <% } else { // if no item to be shown ... %>

           $('div#timelineContainer').html(
               '<span style="font-size:75%;color:grey;">
               No progress information submitted yet.</span>');

       <% } %>    
       });


    </script>
        
       
    <!-- END TimelineJS -->
</head>

<body>  
    <div id="timelineContainer"></div>
</body>

Line 12-53 of the JSP is the TimelineJS script which is dynamically generated using the JSP scriplet for-loop (line 24) to insert the available items (or “documents” in this case) into the timeline.

Making the Timeline More Useful

To make the timeline more useful, hyperlinks were added to the timeline, which can be clicked to open new ZK Tabs containing the detail of the timeline item. To achieve this, the javascript code in the timeline script needs to be able to send an event to the enclosing ZK container so the ZK application can respond and open a new ZK Tab.

Line 28-31 shows the <a> element which is tagged with a CSS class “timeline-doc-link” and a custom attribute “doc-id” which contains the id of the document.

On line 58-73, JQuery code is used to add a click handler to the “div” element with id “timelineContainer”, which is a wrapper around the timeline (The div is defined in the of the HTML).

Line 59-62 retrieves the element which received the click and checks if it’s really the anchor element with the special css class.

Line 65-69 is the real key to enable the interaction between the timeline and the rest of the application, it takes advantage of a very useful ZK feature for sending Event to parent element. Using the “parent.zAu.send” method, we sent an event (called “onDocRequestedFromIframe”) to the parent ZK component “mainWin” (refer to the ZUL snippet shown earlier). From there, the ZK main controller (Java code) that is attached to the main Window component can respond by opening a new ZK Tab to show the requested document.

The result is nicely integrated timeline which can interact with the rest of the ZK application via ZK Events as shown in the following figure. Eventhough the timeline script resides within an iframe, this approach allows the timeline script to invoke Tabs, Menus, and other component within the containing ZK application.

Figure 1 - Seamless Integration of TimelineJS into ZK Application

Figure 1 – Seamless Integration of TimelineJS into ZK Application

In a Nutshell

We have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way, and how to implement it using the ZK Framework, TimelineJS and a little bit of JQuery and Javascript codes. We have shown how to enable seamless interactions between the TimelineJS script and the containing ZK Application using ZK’s Events.

We hope this post can be beneficial for anyone who may be looking to implement similar functionality.

Please also check out our main blog page where you can find useful information regarding Data Management, Business Intelligence, and more (click here).

Visualizing Business Data Along The Time Dimension

Posted by admin on June 18, 2013  /   Posted in BI and Custom Development, Business, Web Development, ZK

by Cancan Gunadi

From time to time businesses are faced with the need to visualize their business data along the time dimension. It is very valuable for the businesses to have a way to visualize information such as milestones or key events in a meaningful way. This visualization answers questions such as “When was the last Sales Milestone achieved?”, “How do I see the progress of XYZ?”, or “What was the last step completed by a training class participant, and when?”

One way we have found to be both effective and engaging is to use a “timeline”. Timeline can be described as a sequence of related events arranged in chronological order and displayed along a line (usually drawn left to right or top to bottom). Data can be aggregrated though a nightly ETL job and key events be made available to be plotted on the timeline by the same job.

Implementation

In our implementation, we used TimelineJS, an interactive web-based timeline tool, and integrated it into the system that we’re building for our client. The system itself is built using ZK Framework. I will write more about the technical detail of how this is done in my next blog.

Here’s an example of how the timeline visualization looks like. Please visit the actual live demo on our server here. (log on using the provided credential).

nctimeline-1

In this mock up example, we show the sales milestones on the timeline. This timeline is interactive, user can slide the timeline bar (bottom half of the timeline widget) with mouse to the left of right, or even swipe with his/her finger on a touch-screen. Clicking on each “flag/event” on the timeline brings up a related bar chart above the timeline bar. If the user needs more detail, he can click on the hyperlink next to the bar chart to open a new tab with all the detail regarding this milestones (See my next blog post for interesting technical detail about the interaction between the TimelineJS, the containing HTML inline frame, and the ZK Framework). User can also navigate to the previous milestone by using the arrow button to the left of the bar chart.

In a Nutshell

We have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way. Using this timeline, businesses can quickly see when a key event occured, time-wise, in relation to other/previous key events.

Stay tuned for my next blog post, where I will describe the technical detail on how to implement this timeline visualization using the TimelineJS, and ZK Framework.

Please also check out our main blog page where you find useful information regarding Data Management, Business Intelligence, and more (click here).

Embedding a ZK application inside a WordPress page

Posted by admin on December 28, 2012  /   Posted in Web Development, ZK

by Cancan Gunadi

Background
There is no doubt that WordPress has emerged into one of the frameworks of choice when it comes to customizable presentation layer that manages static and series-oriented contents. But one obvious area that WordPress isn’t designed to handle is dynamic, transactional UI such as those found in a full-blown web-applications.

What if I offer to show you to have the cake and eat it too?
Have you ever wondered how to embed another web application inside a WordPress page?

Case Study
For example, one of our clients’ project, which is built using WordPress, requires a sophisticated (in terms of presentation and validation) registration form. This online registration form takes the input from the user and writes to a non-wordpress database.

In this case, the form is a Java web application written using ZK Ajax Framework (http://zkoss.org) which talks to Spring-Hibernate backend. To make things more interesting, this Java web application needs to accept a query string parameter that is passed through the main WordPress website URL. That means having to go through WordPress’ PHP code.

Let us see how to do this.

Approach
First, the setup. I have an existing WordPress installed like usual within apache and the ZK Java web application is deployed on tomcat.

This is an example of how the registration form looks like:

Let’s say that my WordPress site is at “http://mysite.com?myparam=abc”. Now I want to add a page on this site which contains the Java web application (the registration form). The Java web application itself is reachable via this url: “http://mysite.com/somepath/zkform?someparam=somevalue” and the “myparam” parameter above must be propagated from the main URL of my WordPress site to the Java web app, i.e: “http://mysite.com/somepath/zkform?myparam=abc“.

In my project, I implemented this by first storing the query string parameter in a cookie, then using a custom iframe (implemented using WordPress shortcode) to retrieve the query string from the cookie and append it to the ZK application URL.

Steps

  1. Write a WordPress plugin which stores the query string param in a cookie such as the following:
  2. add_action('init', 'storeParamInsideCookie');
    function storeParamInsideCookie() {
        $myparam = $_GET['myparam'];
        if (isset($myparam)) {
            $cookieResult = setcookie("myparam", $myparam);
        }
    }
  3. Write another WordPress plugin which defines a shortcode for inserting the Java web application inside an IFrame. The shortcode extracts the param from the cookie, and then pass it along to the src of the iframe:
  4. if ( !function_exists( 'myiframe_shortcode' ) ) :
    
        function myiframe_shortcode( $atts, $content = null ) {
            $myparam = $_COOKIE['myparam'];        
            $html .= ' $value) {
                if( $value != '' ) { // adding all attributes
                    $html .= ' ' . $attr . '="' . $value . '"';
                } else { // adding empty attributes
                    $html .= ' ' . $attr;
                }
            }
    
            $html .= ' src="' . $content;
            global $wp_query;
    
            if (isset($myparam)) {
                $html .= '?myparam=' . $myparam;
            }    
            $html .= '"';
    
            $html .= '>';
            return $html;
    
        }
        add_shortcode('myiframe', 'myiframe_shortcode');
    
    endif;
  5. Install the plugins and activate them in WordPress.
  6. Create a WordPress page, and call the myiframe shortcode to embed the Java web application within the page. Using the normal WordPress editor, add the following line to the page:
  7. [myiframe width="800" height="700"]http://mysite.com/somepath/zkform[/myiframe]

And… voila! Here’s how the resulting page looks like:

Conclusion
In this article, I have shown you how to make two popular application frameworks work seamlessly. A custom ZK -based Java web application that provides sophisticated functionality beyond what WordPress can do, is inserted into a WordPress page using an iframe. Not only that, I have also shown how parameters can travel between WordPress and ZK via a query string and a cookie, thus extending the usefulness of this method in a variety of situations.

As a caveat, there are also other factors that need to be considered when putting something like this together, such as managing the sometime-unavoidable scrollbar of the iframe, which may result in additional scrolling on top of the normal browser scrollbar. Obviously, the php codes that we show here can be improved, but hopefully this post gave you some inspiration on how it can be achieved. Enjoy!

It’s the same thing!

Posted by admin on April 29, 2010  /   Posted in Web Development

After spending an hour to come up with this:


function mapName($th_name, $th_order)
{
return(array($th_name => $th_order));
}
$order = array_map("mapName", $_POST['thFilename'], $_POST['raw_orders']);
$order_collapsed = array();
foreach ($order as $k => $v) {
foreach ($v as $k2 => $v2) {
$order_collapsed[$k2] = $v2;
}
}

… I found out that I can achieve the same goal by doing this:


$order_collapsed = array_combine($_POST['thFilename'], $_POST['raw_orders']);

To make a lemonade out of lemons, I did learn quite a bit about Array handling in PHP.

Got to hand it to the PHP community,due to their maturity (I’m using PHP 5, not even the latest 6), they have quite a collection of some nifty stuff that you often need to do with arrays. It’s just a matter of knowing what’s in the API before reinventing the wheel.


We serve businesses of any type and size
Contact Us Today