Tag Archives: Plugin

PluginApplet.jsp Page that demonstrates the use of jsp:plugin.

Huge Sell on Popular Electronics

PluginApplet.jsp  Page that demonstrates the use of jsp:plugin. Requires you to compile and install PluginApplet.java, TextPanel.java, DrawingPanel.java, and WindowUtilities.java  Since these are classes sent to the client to used by applets, the .class files should be in the same directory as the JSP page, not in the WEB-INF/classes directory where classes the server uses go. Uses the JSP-Styles  style sheet. Warning: Allaire JRun 3.0 SP2 does not properly support jsp:plugin.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- 
Example of using jsp:plugin for an applet that uses Java 2. 

Taken from Core Web Programming Java 2 Edition
from Prentice Hall and Sun Microsystems Press,
.
May be freely used or adapted.
-->
<HTML>
<HEAD>
<TITLE>Using jsp:plugin</TITLE>
<LINK REL=STYLESHEET
      HREF="JSP-Styles.css"
      TYPE="text/css">
</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">
  <TR><TH CLASS="TITLE">
      Using jsp:plugin</TABLE>
<P>
<CENTER>
<jsp:plugin type="applet" 
            code="PluginApplet.class"
            width="370" height="420">
</jsp:plugin>
</CENTER>

</BODY>
</HTML>

PluginApplet.java

import javax.swing.*;

/** An applet that uses Swing and Java 2D and thus requires
 *  the Java Plug-In.
 *  <P>
 *  Taken from Core Web Programming Java 2 Edition
 *  from Prentice Hall and Sun Microsystems Press,
 *  .
 *  May be freely used or adapted.
 */

public class PluginApplet extends JApplet {
  public void init() {
    WindowUtilities.setNativeLookAndFeel();
    setContentPane(new TextPanel());
  }
}


TextPanel.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/** JPanel that places a panel with text drawn at various angles
 *  in the top part of the window and a JComboBox containing
 *  font choices in the bottom part.
 *  <P>
 *  Taken from Core Web Programming Java 2 Edition
 *  from Prentice Hall and Sun Microsystems Press,
 *  .
 *  May be freely used or adapted.
 */

public class TextPanel extends JPanel
                       implements ActionListener {
  private JComboBox fontBox;
  private DrawingPanel drawingPanel;

  public TextPanel() {
    GraphicsEnvironment env =
      GraphicsEnvironment.getLocalGraphicsEnvironment();
    String[] fontNames = env.getAvailableFontFamilyNames();
    fontBox = new JComboBox(fontNames);
    setLayout(new BorderLayout());
    JPanel fontPanel = new JPanel();
    fontPanel.add(new JLabel("Font:"));
    fontPanel.add(fontBox);
    JButton drawButton = new JButton("Draw");
    drawButton.addActionListener(this);
    fontPanel.add(drawButton);
    add(fontPanel, BorderLayout.SOUTH);
    drawingPanel = new DrawingPanel();
    fontBox.setSelectedItem("Serif");
    drawingPanel.setFontName("Serif");
    add(drawingPanel, BorderLayout.CENTER);
  }

  public void actionPerformed(ActionEvent e) {
    drawingPanel.setFontName((String)fontBox.getSelectedItem());
    drawingPanel.repaint();
  }
}


DrawingPanel.java
import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;

/** A window with text drawn at an angle. The font is
 *  set by means of the setFontName method.
 *  <P>
 *  Taken from Core Web Programming Java 2 Edition
 *  from Prentice Hall and Sun Microsystems Press,
 *  .
 *  May be freely used or adapted.
 */

class DrawingPanel extends JPanel {
  private Ellipse2D.Double circle =
    new Ellipse2D.Double(10, 10, 350, 350);
  private GradientPaint gradient =
    new GradientPaint(0, 0, Color.red, 180, 180, Color.yellow,
                      true); // true means to repeat pattern
  private Color[] colors = { Color.white, Color.black };

  public void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2d = (Graphics2D)g;
    g2d.setPaint(gradient);
    g2d.fill(circle);
    g2d.translate(185, 185);
    for (int i=0; i<16; i++) {
      g2d.rotate(Math.PI/8.0);
      g2d.setPaint(colors[i%2]);
      g2d.drawString("jsp:plugin", 0, 0);
    }
  }

  public void setFontName(String fontName) {
    setFont(new Font(fontName, Font.BOLD, 35));
  }
}


WindowUtilities.java

import javax.swing.*;
import java.awt.*;

/** A few utilities that simplify using windows in Swing.
 *  <P>
 *  Taken from Core Web Programming Java 2 Edition
 *  from Prentice Hall and Sun Microsystems Press,
 *  .
 *  May be freely used or adapted.
 */

public class WindowUtilities {

  /** Tell system to use native look and feel, as in previous
   *  releases. Metal (Java) LAF is the default otherwise.
   */

  public static void setNativeLookAndFeel() {
    try {
      UIManager.setLookAndFeel
        (UIManager.getSystemLookAndFeelClassName());
    } catch(Exception e) {
      System.out.println("Error setting native LAF: " + e);
    }
  }

  public static void setJavaLookAndFeel() {
    try {
      UIManager.setLookAndFeel
        (UIManager.getCrossPlatformLookAndFeelClassName());
    } catch(Exception e) {
      System.out.println("Error setting Java LAF: " + e);
    }
  }

  public static void setMotifLookAndFeel() {
    try {
      UIManager.setLookAndFeel
        ("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
    } catch(Exception e) {
      System.out.println("Error setting Motif LAF: " + e);
    }
  }

  /** A simplified way to see a JPanel or other Container.
   *  Pops up a JFrame with specified Container
   *  as the content pane.
   */

  public static JFrame openInJFrame(Container content,
                                    int width,
                                    int height,
                                    String title,
                                    Color bgColor) {
    JFrame frame = new JFrame(title);
    frame.setBackground(bgColor);
    content.setBackground(bgColor);
    frame.setSize(width, height);
    frame.setContentPane(content);
    frame.addWindowListener(new ExitListener());
    frame.setVisible(true);
    return(frame);
  }

  /** Uses Color.white as the background color. */

  public static JFrame openInJFrame(Container content,
                                    int width,
                                    int height,
                                    String title) {
    return(openInJFrame(content, width, height, title, Color.white));
  }

  /** Uses Color.white as the background color, and the
   *  name of the Container's class as the JFrame title.
   */

  public static JFrame openInJFrame(Container content,
                                    int width,
                                    int height) {
    return(openInJFrame(content, width, height,
                        content.getClass().getName(),
                        Color.white));
  }
}

WordPress Plugins

Huge Sell on Popular Electronics

Plugins মূলত WordPress এর কার্যপরিধি প্রসারণ করার উপকরণ। WordPress তৈরি করার মূলে রয়েছে কোডের স্ফীতি কমিয়ে ওয়েবসাইট নির্মাণ কৌশলকে সহজতর করে তোলা। Plugins এমন কিছু function ও feature সরবারহ করে , যাতে করে WordPress ব্যবহারকারীরা তাদের website এর প্রয়োজন অনুযায়ী function ব্যবহার করতে পারে। আপনার website এর Plugins ব্যবস্থাপনার জন্য যদি কোন নির্দেশাবলি, ডাউনলোড, ইন্সটল, আপগ্রেড এর প্রয়োজন হয় তবে managing plugins.ds দেখুন। আর যদি আপনি আপনার নিজের plugin কে develop করতে চান তবে এর জন্য plugin resources দেখতে পারেন।

Plugin Repositories

WordPress plugin বিভিন্ন সূত্র থেকে পাওয়া যায়। তবে এর অফিসিয়াল উৎস হল-

Official WordPress plugins Repository

তবে সব plugins হয়ত এখানে নাও পাওয়া যেতে পারে, তাই চেষ্টা করতে হবে WordPress plugin এর জন্য web খুঁজতে।

Default plugin

নিম্নলিখিত plugin টি WordPress এর সাথে সংযুক্ত করে দেয়া হয়-

Akismet

এটি আপনার website এর comment check করবে, এতে spam আছে কিনা। এছাড়া আপনি এটিকে manage এর অধীনে রেখে পর্যালোচনা করতে পারেন যা স্বয়ংক্রিয়ভাবে ১৫ দিন পর পর পুরানো spam হিসেবে মুছে যেতে পারে।

বুটস্ট্রাপ ক্যারোজেল প্লাগিন (Bootstrap Carousel Plugin)

Huge Sell on Popular Electronics

বুটস্ট্রাপ কারুসেল প্লাগিন

Carousel প্লাগইন হচ্ছে এলিমেন্ট দ্বারা আবর্ত করার জন্য একটি ক্যারোজেল (স্লাইডশো) এর মত একটি উপাদান।

টিপস : প্লাগইন স্বতন্ত্রভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপ এর স্বতন্ত্র "carousel.js" ফাইল ব্যবহার করে), অথবা সব একযোগে ("bootstrap.js" বা "bootstrap.min.js" ব্যবহার করে)

এর উদাহরণ

নোট : ক্যারোজেল ইন্টারটেন এক্সপ্লোরার ৯ এবং এর আগের ভার্সনগুলোতে সাপর্ট করে না (কারণ তারা স্লাইড ইফেক্ট CSS 3 ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে)।

 

কিভাবে একটি ক্যারোজেল তৈরি করা যায়

নিজের উদাহরণে একটি সাধারণ ক্যারোজেল তৈরি করার পদ্ধতি দেখানো হল:

উদাহরণ : ০১


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : কিভাবে কেরোজেল তৈরি করবেন

 

উদাহরণের ব্যাখ্যা

<div> অংশ:

প্রথমে id="myCarousel" নামে একটা আইডি নিতে হবে যাতে ক্যারোজেল এর কন্ট্রোলগুলো সিঠিকভাবে কাজ করতে পারে।

class="carousel" নির্দেশ করে যে <div> এর ভিতরে একটি ক্যারোজেল আছে।

.slide ক্লাসটি সিএসএস ট্রানজিশন এবং অ্যানিমেশন ইফেক্ট যোগ করে, যা যখন নতুন আইটেম প্রদর্শিত হয় তখন আগের আইটেমটিকে স্লাইড করে। আপনি যদি এটি না চান তাহলে এটিকে মুছে দিতে পারেন।

data-ride="carousel" এট্রিবিউটটি পেজ লোড হওয়ার সময় বুটস্ট্রাপকে নির্দেম দেয় ক্যারোজেল এনিমেশন শুরু করার জন্য।

 

"Indicators" (নির্দেশক) অংশ

"Indicators" হচ্ছে প্রতিটি স্লাইডের নিজের দিকে ছোট একটি বিন্দু (যা নির্দেশ ক্যারোজেল এর মধ্যে কতটি স্লাইড রয়েছে এবং ব্যবহারকারী বর্তমানে কোন স্লাইডটি দেখছে)।

.carousel-indicators ক্লাস এর সাথে ক্রম তালিকায় নির্দেশক উল্লেক করা হয়।

data-target এট্রিবিউট ক্যারোজেল এর আইডিকে পয়েন্ট করে।

data-slide-to এট্রিবউট নির্দেশ করে কোন স্লাইডটি প্রদর্শিত হবে যখন নির্দিষ্ট ডট এ ক্লিক করা হবে।

 

"Wrapper for slides" স্লাইড এর জন্য আবরণ অংশ:

<div> এর মধ্যে .carousel-inner ক্লাস দ্বারা স্লাইড নির্দিষ্ট করা হয়।

.item ক্লাস দ্বারা <div> এর মধ্যের উপাদানগুলোকে সঙ্গায়িত করা হয়।

একটি স্লাইড এর মধ্যে .active ক্লাস যোগ করতে হয়। এছাড়া ক্যারোজেলটি দৃশ্যমান হয় না।

 

"Left and right controls" ডান বাম নিয়ন্ত্রণ অংশ:

কোডটি ডান এবং বাম বাটন যোগ করে যা দ্বারা ব্যবহারকারী নিজের ইচ্ছা মতো ডান অথবা বাম স্লাইডে যেতে পারে।

data-slide এট্রিবিউটটি prev" এবং "next" কীওয়ার্ডকে গ্রহণ করে। যা বর্তমান অবস্থানের পরিপ্রেক্ষিকে স্লাইড এর আপেক্ষিক অবস্থান পরিবর্তন করে।

 

 

 

স্লাইড এ ক্যাপশন যোগ করা

প্রতিটি স্লাইডের জন্য ক্যাপসন তৈরি করার জন্য প্রতিটি <div class="item">  এর ভিতরে <div class="carousel-caption"> যোগ করুন।

উদাহরণ ০২:


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : স্লাইড এ ক্যাপশন যোগ করা